import React, { component } from 'react'
class ComSon extends React.Component {
    constructor() {
        super();
        this.state = {
            message: '这是子组件的信息'
        }
    }
    // 4.props修改导致页面变化---外部因素
    componentWillReceiveProps(props) {
        console.log('新的props：', props);
    }
    // 更新期
    shouldComponentUpdate(nextProps, nextState) {
        // 数据变化后需要判断是否更新dom，需要返回一个布尔值
        console.log('子组件', nextProps);
        console.log('子组件', nextState);
        return true;
    }
    // 销毁期
    componentWillUnmount() {
        // 这里要清除自定义的定时器和事件监听
        console.log('====== componentWillUnmount =====');
    }
    render(props) {
        console.log('=========渲染页面=======');
        return (<div>
            <p>我是子组件</p>
            <p>父组件传过来的值：{this.props.info}</p>
            <p>父组件传过来的值：{this.props.age}</p>
            <p>严格的单项数据流,父组件数据的变化会同步到子组件,组件传过来的值只读属性，不允许修改</p>
            <p>父组件传过来的值：{this.props.name}</p>
            <p>子传父的思路:父传子的一个函数，子组件调用这个函数时，携带的参数就是要传递的数据</p>
            <button onClick={() => this.props.transferMsg(this.state.message)}>子传父</button>

        </div>)
    }
}
export default ComSon